let spTime = document.getElementById('spTime');

// function的格式：function 函数名(参数列表) {函数体}
// 通过 函数名(参数)就能执行函数体中的代码

function getNowTime() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();

  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  // 前置补0 ?:是三元表达式,?前面是一个逻辑表达式，
  // 如果是真，就执行:前面代码，否则执行:后面代码
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return `${year}年${month}月${date}日 ${hour}:${minute}:${second}`;
}

spTime.innerHTML = getNowTime();

setInterval(() => {
  spTime.innerHTML = getNowTime();
}, 1000);

// json对象格式
// { "键名":值,键名2:值,...   }
// 通过json对象.键名可以获取到对应的值
// json对象的值可以是任意类型，包括json自己
let class2301 = {
  id: 1,
  classname: '2301班',
  classinfo: '计算机专业23级一班',
  created: '2023-09-01',
};

let spClassId = document.getElementById('spClassId');
let spClassname = document.getElementById('spClassname');

spClassId.innerHTML = class2301.id;
spClassname.innerHTML = class2301.classname;

let spClass = document.getElementById('spClass');

spClass.innerHTML = `
  编号：${class2301.id} <br>
  名称：${class2301.classname} <br>
  简介：${class2301.classinfo} <br>
  创建时间：${class2301.created} <br>
`;

// 套娃版本的json
let student = {
  id: 1,
  name: '张三',
  sex: '男',
  class: {
    id: 20,
    classname: '套娃班',
    classinfo: 'json套娃演示',
  },
};

let spStudent = document.getElementById('spStudent');
spStudent.innerHTML = `
  ${student.class.classname}
  ${student.name}(${student.sex})
`;
